Skip to content

feat: Add Node.js Ecosystem learning module#12

Merged
mnaimfaizy merged 1 commit into
mainfrom
feature/nodejs-ecosystem-module
Apr 2, 2026
Merged

feat: Add Node.js Ecosystem learning module#12
mnaimfaizy merged 1 commit into
mainfrom
feature/nodejs-ecosystem-module

Conversation

@mnaimfaizy
Copy link
Copy Markdown
Owner

🚀 Node.js Ecosystem Learning Module

A complete new learning module covering the Node.js ecosystem — from Event Loop internals to the runtime wars between Node.js, Deno, and Bun.

📋 Summary

This PR adds a full-featured Node.js Ecosystem module with 10 educational sections and 8 interactive SVG visualizations, following the existing feature module architecture. It also updates navigation, theming, the home page, and documentation.


📚 Sections (10)

# Section Description
1 Introduction Overview with stats, ELI10 analogy, company examples (Netflix, PayPal, LinkedIn, Uber, NASA), and learning journey
2 Event Loop 5-phase architecture (Timers → Pending → Poll → Check → Close), microtasks, process.nextTick(), libuv thread pool
3 Async Programming Evolution from callbacks → Promises → async/await with tabbed code examples
4 Buffers & Streams Buffer API, 4 stream types (Readable, Writable, Duplex, Transform), backpressure handling
5 Scaling Cluster module vs Worker Threads, comparison table, PM2 integration, when-to-use guide
6 Memory Management V8 heap structure, Minor GC (Scavenge) vs Major GC (Mark-Sweep-Compact), memory leak patterns and debugging
7 Module System CommonJS vs ESM syntax, enabling ESM, key differences (copies vs live bindings, tree-shaking, top-level await)
8 Package Managers npm vs Yarn vs pnpm architecture, phantom dependencies, Corepack, decision guide
9 Frameworks Express, Fastify, NestJS, Koa, Hono deep dives with code examples and decision guide
10 Runtime Wars Node.js vs Deno vs Bun — origin stories, key differences table, when-to-choose guide, WinterCG future

🎨 Visualizations (8)

Visualization Features
EventLoopViz Animated 5-phase circular loop with microtask queue, libuv thread pool, play/pause/reset/speed controls
StreamsBuffersViz Streaming pipeline animation with backpressure demo and memory comparison
ClusterVsWorkerViz Tabbed cluster vs worker threads architecture comparison
V8MemoryViz Interactive V8 heap with Minor/Major GC trigger controls
PackageManagerViz npm/yarn/pnpm install simulation with performance and disk usage bars
ModuleSystemViz CJS vs ESM step-through loading with tree-shaking demo
RuntimeComparisonViz Node vs Deno vs Bun architecture, strengths/weaknesses, benchmark metrics
FrameworksViz Express/Fastify/NestJS/Koa/Hono comparison with performance bars and feature highlights

🔧 Integration Changes

  • src/utils/theme.ts — Added nodejs color scheme (green/emerald/lime)
  • src/App.tsx — Added lazy-loaded NodeJSPage import and /nodejs route
  • src/components/Header.tsx — Added Node.js to Frameworks navigation group with Server icon; updated getActiveColor() for /nodejs
  • src/components/Sidebar.tsx — Added 10 sidebar section entries for /nodejs; added 'nodejs' to getSectionFromPath() return type; added green color to getThemeColorClass()
  • src/pages/Home.tsx — Added Node.js Ecosystem module card; updated stats from 11+ → 12+ modules and 70+ → 78+ visualizations; added to learning path Phase 4; updated SEO description
  • README.md — Updated module count and added Node.js Ecosystem to feature list

📁 Files Added (21 new files)

src/features/nodejs/
├── NodeJSPage.tsx                              # Main page with lazy-loaded sections
├── index.ts                                    # Module export
├── components/
│   ├── sections/
│   │   ├── Introduction.tsx
│   │   ├── EventLoop.tsx
│   │   ├── AsyncProgramming.tsx
│   │   ├── BuffersStreams.tsx
│   │   ├── Scaling.tsx
│   │   ├── MemoryManagement.tsx
│   │   ├── ModuleSystem.tsx
│   │   ├── PackageManagers.tsx
│   │   ├── Frameworks.tsx
│   │   └── RuntimeWars.tsx
│   └── visualizations/2d/
│       ├── EventLoopViz.tsx
│       ├── StreamsBuffersViz.tsx
│       ├── ClusterVsWorkerViz.tsx
│       ├── V8MemoryViz.tsx
│       ├── PackageManagerViz.tsx
│       ├── ModuleSystemViz.tsx
│       ├── RuntimeComparisonViz.tsx
│       └── FrameworksViz.tsx
docs/
└── Node.js Ecosystem Research Report.md        # Source research report

✅ Checklist

  • TypeScript compilation passes (tsc -b)
  • Vite production build succeeds
  • Follows feature-based module architecture
  • All sections use SectionLayout, ThemeCard, CTASection shared components
  • All visualizations are interactive with play/pause/reset controls
  • Lazy loading for all section components (code splitting)
  • Navigation updated (Header, Sidebar, Home page)
  • Theme color scheme added
  • README documentation updated
  • Light mode only (no dark: classes)

Add a complete new learning module covering the Node.js ecosystem with
10 sections and 8 interactive SVG visualizations.

Sections:
- Introduction — overview, stats, company examples, learning journey
- Event Loop — 5-phase architecture, microtasks, libuv thread pool
- Async Programming — callbacks, promises, async/await evolution
- Buffers & Streams — Buffer API, 4 stream types, backpressure
- Scaling — Cluster vs Worker Threads, PM2, comparison table
- Memory Management — V8 heap, Minor/Major GC, memory leak patterns
- Module System — CommonJS vs ESM syntax, tree-shaking, live bindings
- Package Managers — npm vs Yarn vs pnpm architecture and trade-offs
- Frameworks — Express, Fastify, NestJS, Koa, Hono comparison
- Runtime Wars — Node.js vs Deno vs Bun benchmarks and decision guide

Visualizations:
- EventLoopViz — animated 5-phase loop with microtask queue
- StreamsBuffersViz — streaming pipeline with backpressure demo
- ClusterVsWorkerViz — tabbed cluster vs worker threads comparison
- V8MemoryViz — interactive V8 heap with GC trigger controls
- PackageManagerViz — npm/yarn/pnpm install simulation
- ModuleSystemViz — CJS vs ESM step-through loading
- RuntimeComparisonViz — Node vs Deno vs Bun architecture comparison
- FrameworksViz — Express/Fastify/NestJS/Koa/Hono performance bars

Integration:
- Add 'nodejs' color scheme (green/emerald/lime) to theme.ts
- Add lazy-loaded /nodejs route in App.tsx
- Add Node.js to Header navigation (Frameworks group)
- Add 10 sidebar entries + getSectionFromPath + green color in Sidebar.tsx
- Add Node.js module card to Home page
- Update stats to 12+ modules, 78+ visualizations
- Update README with Node.js Ecosystem module info
@mnaimfaizy mnaimfaizy self-assigned this Apr 2, 2026
@mnaimfaizy mnaimfaizy merged commit 79c9f1e into main Apr 2, 2026
7 checks passed
@mnaimfaizy mnaimfaizy deleted the feature/nodejs-ecosystem-module branch April 2, 2026 06:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant